<!DOCTYPE html>
<html>
<head>

    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>调度监控系统Dome练习</title>
    <link rel="stylesheet" type="text/css" href="plugins\easyUI\themes\default\easyui.css">
    <link rel="stylesheet" type="text/css" href="plugins\easyUI\themes\icon.css">
    <link rel="stylesheet" type="text/css" href="plugins\easyUI\themes\bootstrap\datagrid.css">

    <!--引入bootstrap样式 和 bootstrap-datetimepicker样式表-->
    <link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">

    <!--bootstrapTable-->
    <link href="table/css/bootstrap.min.css" rel="stylesheet">
    <link href="table/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			color:#666;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
		}
		.fitem label{
			display:inline-block;
			width:100px;
		}
		#item ul{list-style:none;}
		#item li{
		float:left;
		margin:10px;
		}
	</style>

    <style>
        .update {
            color: #333;
            margin-right: 5px;
        }

        .remove {
            color: red;
            margin-left: 5px;
        }

        .alert {
            padding: 0 14px;
            margin-bottom: 0;
            display: inline-block;
        }
    </style>

    <!--menu-->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<link rel="stylesheet" type="text/css" href="menu/css/default.css" />-->
    <link rel="stylesheet" type="text/css" href="menu/css/component.css" />
    <!--menu-->
</head>

<body>
<!--顶部-->
<div class="row clearfix">
    <div class="col-md-2 column">
        <img alt="logo" src="plugins\img\timg.jpg" width="245px" height="50px"/>
    </div>
    <div class="col-md-8 column" style="left:20px;">
        <h4>
            调度监控系统dome练习
        </h4>
    </div>
    <div class="col-md-2 column" id='item'>
        <ul>
            <li title="首页">
                <a href="#/index"><span class="glyphicon glyphicon-home"></span></a>
            </li>
            <li title="系统设置">
                <a href="#/setting"><span class="glyphicon glyphicon-cog"></span></a>
            </li>
            <li title="退出系统">
                <span class="glyphicon glyphicon-off" id="exitSystem"></span>
            </li>
        </ul>
    </div>
</div>
<!--顶部-->

<div class="row clearfix">
    <div class="col-md-2 column">
        <!--menu-->
        <nav class="dr-menu">
            <div class="dr-trigger">
                <span class="dr-icon dr-icon-menu"></span>
                <a class="dr-label">菜单</a>
            </div>
            <ul>
                <li><a class="dr-icon dr-icon-user" href="#">调度计划信息</a></li>
                <li><a class="dr-icon dr-icon-camera" href="#">作业信息</a></li>
                <li><a class="dr-icon dr-icon-heart" href="#">作业关系</a></li>
                <li><a class="dr-icon dr-icon-bullhorn" href="#">调度作业执行图</a></li>
                <li><a class="dr-icon dr-icon-download" href="#">全局参数设置</a></li>
                <!--<li><a class="dr-icon dr-icon-settings" href="#">修改密码</a></li>
                <li><a class="dr-icon dr-icon-switch" href="#">退出系统</a></li>-->
            </ul>
        </nav>
        <!--menu-->
    </div>

    <div class="col-md-10 column" style="left:25px;">
        <div class="crumbs-box" style="font-size:15px;margin:10px;">
            <span class="glyphicon glyphicon-home" ></span>
            <i class="fa fa-home"></i>
            <i>调度监控系统</i>
            <em>/</em>
            <i>调度任务信息</i>
        </div>

        <!--条件查询-->
        <div class="search-box">
            <form id="search-form" onsubmit="return false">
                <div class="row">
                    <div class="col-sm-2 labelName" style="font-size:20px;">调度计划编号：</div>
                    <div class="col-sm-2"><input type="text" id="QplanId" name="planId" class="form-control" maxlength="15"></div>
                    <div class="col-sm-2 labelName" style="font-size:20px;">调度计划名称：</div>
                    <div class="col-sm-2"><input type="text" id="QplanName"name="planName" class="form-control" maxlength="30"></div>
                </div>
                <div class="row">
                    <div class="col-sm-2 labelName" style="font-size:20px;">调度计划类别：</div>
                    <div class="col-sm-2">
                        <select name="planType" id="QplanType" class="form-control">
                            <option value="" selected="selected" >请选择</option>
                            <option value="a">a</option>
                            <option value="b">b</option>
                            <option value="c">c</option>
                        </select>
                    </div>
                    <div class="col-sm-2 labelName" style="font-size:20px;">创建时间：</div>
                    <div class="col-sm-6">
                        <input type="text" id="fromCreateTime" name="fromCreateTime" class="form-control datePicker" style="display:inline-block;width:auto;">
                        --
                        <input type="text" id="toCreateTime" name="toCreateTime" class="form-control datePicker" style="display:inline-block;width:auto;">
                    </div>
                </div>
                <div class="row" >
                    <div class="col-sm-9"></div>
                    <div class="col-sm-2">
                        <button class="btn btn-primary" id="submitSearch" onclick="query()" style="font-size:18px;">搜索</button>
                        <button class="btn btn-primary" id="submitReset" type="reset"style="font-size:18px;" >重置</button>
                    </div>
                </div>
            </form>
        </div>
        <!--数据表格-->

        <div class="container">
            <h1>平台管理</h1>
            <p class="toolbar">
                <a class="create btn btn-default" href="javascript:">创建新项目</a>
                <span class="alert"></span>
            </p>
            <table id="table"
                   data-show-refresh="true"
                   data-show-columns="true"
                   data-search="true"
                   data-query-params="queryParams"
                   data-toolbar=".toolbar">
                <thead>
                <tr>
                    <th data-checkbox="true" data-maintain-selected="true" checkboxEnabled="true"></th>
                    <th data-field="jobId">作业号</th>
                    <th data-field="jobName">作业名称</th>
                    <th data-field="jobLevel">作业优先级</th>
                    <th data-field="jobServerName">作业执行名称</th>
                    <th data-field="jobDesc">作业描述</th>
                    <th data-field="isSubJob">是否有子作业</th>
                    <th data-field="createTime">创建时间</th>
                    <th data-field="action"
                        data-align="center"
                        data-formatter="actionFormatter"
                        data-events="actionEvents">操作
                    </th>
                </tr>
                </thead>
            </table>
        </div>

        <div id="modal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <span class="input-group-addon">序号</span>
                            <input class="form-control" type="text" name="id" id="id" disabled="disabled">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">作业号</span>
                            <input class="form-control" type="text" name="jobId" id="jobId">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">作业名称</span>
                            <input class="form-control" type="text" name="jobName" id="jobName">
                        </div>
                        <div class="input-group">

                            <span class="input-group-addon">作业优先级</span>
                            <input class="form-control" type="text" name="jobLevel" id="jobLevel">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">作业执行名称</span>
                            <input class="form-control" type="text" name="jobServerName" id="jobServerName">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">作业描述</span>
                            <input class="form-control" type="text" name="jobDesc" id="jobDesc">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">是否有子作业</span>
                            <input class="form-control" type="text" name="isSubJob" id="isSubJob">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">是否等待</span>
                            <input class="form-control" type="text" name="isWait" id="isWait">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">是否删除</span>
                            <input class="form-control" type="text" name="isDeleted" id="isDeleted">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">创建时间</span>
                            <input class="form-control" type="text" name="createTime" id="createTime">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">更新时间</span>
                            <input class="form-control" type="text" name="updateTime" id="updateTime">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">更新用户</span>
                            <input class="form-control" type="text" name="updateBy" id="updateBy">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">提交</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

    </div>
</div>
<script src="datetimepicker/jquery-1.9.1.min.js"></script>
<!--<script src="plugins/bootstrap/js/bootstrap.min.js"></script>-->
<script src="plugins/bootstrap/jquery.min.js"></script>
<script src="datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>

<!--<script src="table/js/jquery.min.js"></script>-->
<script src="table/js/bootstrap.min.js"></script>
<script src="table/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="table/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--<script type="text/javascript" src="plugins\easyUI\jquery.easyui.min.js"></script>-->
<script src="menu/js/modernizr.custom.js"></script>
<script src="menu/js/ytmenu.js"></script>
</body>

<script type="text/javascript">
	$('.datePicker').datetimepicker({
     	language:'zh-CN',
        format:'yyyy-mm-dd hh:ii:ss',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1,
    });
	</script>
<script>
var update=0;
var rowId;
    var $table = $('#table').bootstrapTable({
                url: "/scheduler/jobs",
                toolbar: '#toolbar', //工具按钮用哪个容器
                //striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                //queryParams: postQueryParams,//传递参数（*）
                //sidePagination: "server",      //分页方式：client客户端分页，server服务端分页（*）
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                strictSearch: true,
//              height: table_h, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度,设置了行高后编辑时标头宽度不会随着下面的行改变，且颜色也不会改变？？？？
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                paginationHAlign: "left",
                singleSelect: true,
                search: true,               //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
                //strictSearch: true,
                showColumns: true, //是否显示所有的列
                showRefresh: true, //是否显示刷新按钮
                clickToSelect: true, //是否启用点击选中行
                paginationPreText: "<<",
                paginationNextText: ">>"
    });
            $modal = $('#modal').modal({show: false});
            $alert = $('.alert').hide();

        // create event创建事件
        $('.create').click(function () {
            showModal($(this).text());
            update=2;
        });

    function queryParams(params) {
        return {};
    }

    function actionFormatter(value) {
        return [
            '<a class="update" href="javascript:" title="Update Item"><i class="glyphicon glyphicon-edit"></i></a>',
            '<a class="remove" href="javascript:" title="Delete Item"><i class="glyphicon glyphicon-remove-circle"></i></a>',
        ].join('');
    }

    // update and delete events
    window.actionEvents = {
        'click .update': function (e, value, row) {
            showModal($(this).attr('title'), row);
            rowId=row.id;
            update=1;
        },

        'click .remove': function (e, value, row) {
            if (confirm('Are you sure to delete this item?')) {
                $.ajax({
                    url: "/scheduler/jobs/"+ row.id,
                    type: 'delete',
                    success: function () {
                        $table.bootstrapTable('refresh');
                        showAlert('Delete item successful!', 'success');
                    },
                    error: function () {
                        showAlert('Delete item error!', 'danger');
                    }
                })
            }
        }
    };

    $(function () {
        $modal.find('.submit').click(function () {
            var row = {};
            $modal.find('input[name]').each(function () {
                row[$(this).attr('name')] = $(this).val();
            });

            if(update==2){
                url="/scheduler/jobs";
                type="post";
                alert(update);
            }
            else if(update==1){
                url="/scheduler/jobs/"+ rowId;
                type="put";
                alert(update);
            }
                $.ajax({
                    url: url,
                    type: type,
                    contentType: 'application/json',
                    data: JSON.stringify(row),
                    success: function () {
                        $modal.modal('hide');
                        $table.bootstrapTable('refresh');
                        showAlert(('创建') + ' item successful!', 'success');
                    },
                    error: function () {
                        $modal.modal('hide');
                        showAlert(('创建') + ' item error!', 'danger');
                    }
                });
        });
    });

    function showModal(title, row) {
        row = row || {
                    id: '',
                    state: 0
                }; // default row value
        $modal.data('id', row.code);
        $modal.find('.modal-title').text(title);
        for (var name in row) {
            $modal.find('input[name="' + name + '"]').val(row[name]);
        }
        $modal.modal('show');
    }

    //显示结果信息，3秒后关闭
    function showAlert(title, type) {
        $alert.attr('class', 'alert alert-' + type || 'success')
                .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
        setTimeout(function () {
            $alert.hide();
        }, 3000);
    }
</script>
</html>